<template>
	<div class="home">
		<div class="home_header">
			<div class="home_search" @click="searchContent">
				<up-search placeholder="请输入关键词" disabled="true" @custom="custom"></up-search>
			</div>
			<div class="home_rotating">
				<up-swiper :list="data.img" indicator indicatorMode="line" circular height="200"></up-swiper>
			</div>
		</div>
		<div class="home_content">
			<div class="home_options">
				<view class="option_ul">
					<view class="option_li">
						<view class="option_image"><image src="../../static/options/recommend.png" mode=""></image></view>
						<div>新品推荐</div>
					</view>
					<view class="option_li">
						<view class="option_image"><image src="../../static/options/recommend.png" mode=""></image></view>
						<div>限时特惠</div>
					</view>
					<view class="option_li">
						<view class="option_image"><image src="../../static/options/recommend.png" mode=""></image></view>
						<div>每日疯抢</div>
					</view>
					<view class="option_li">
						<view class="option_image"><image src="../../static/options/recommend.png" mode=""></image></view>
						<div>领优惠券</div>
					</view>
				</view>
			</div>
			<div class="home_bulletin">
				<view>
					<up-notice-bar :text="data.bulletin" direction="column"></up-notice-bar>
				</view>
			</div>
		</div>
		<div class="home_bottom">
			<div class="toggle">
				<up-sticky bgColor="#fff" offsetTop="25">
					<up-tabs :list="list1" @click="change"></up-tabs>
				</up-sticky>
				<view class="home_card">
					<waterfallVue :all="data.allRecommended"></waterfallVue>
				</view>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref, watch, watchEffect } from 'vue';
import waterfallVue from '../../components/waterfall/waterfall.vue';
import { GettingRotating, GetBulletin, GetShoppingCart } from '../../apis/api';
import useCartStore from '../../store/index.js';
import {onShow} from '@dcloudio/uni-app'

// const keyword = ref('遥看瀑布挂前川');
const active = ref(0);
const list1 = reactive([
	{ name: '全部', id: '0' },
	{ name: '推荐', id: '1' }
]);

const cartStore = useCartStore();

const data = reactive({
	img: '',
	bulletin: [],
	category: [],
	allRecommended: 0 //默认传参数数为0，可能到后面会出现错误
});

// 点击搜索
const searchContent = () => {
	uni.navigateTo({
		url: '/pages/search/search'
	});
	console.log(1);
};

const custom = () => {
	uni.navigateTo({
		url: '/pages/search/search'
	});
};

// 全部和推荐，切换来获取数据
const change = (e) => {
	console.log(e);
	data.allRecommended = e.id;
};

 

onShow(() => {
	uni.getStorage({
		key: 'userId',
		success: (res) => {
			data.user_id = res.data;
			console.log('获取的 userId 为：', data.user_id);
			GetShoppingCart(data.user_id).then((res) => {
				if (res.msgType == 8000) {
					console.log(res);
					data.shopinngData = res.data;
					cartStore.initBadge(data.user_id).then(()=>{
						// console.log(cartStore.$state.badge);
						uni.setTabBarBadge({
							index: 2, // 底部菜单栏的索引（从0开始）
							text: String(cartStore.$state.badge) // 要显示的文本（必须是字符串类型）
						});
					})
				}
			});
		},
		fail: (error) => {
			console.error('获取 userId 失败：', error);
		}
	});
});

onMounted(() => {
	// 轮播图
	GettingRotating()
		.then((res) => {
			// console.log('成功', res.data);
			data.img = res.data.map((item) => item.image_url);
		})
		.catch((err) => {
			console.error('失败', err);
		});

	// 公告
	GetBulletin()
		.then((res) => {
			// console.log(res.data);
			data.bulletin = res.data.map((item) => item.bulletin_content);
			// console.log(data.bulletin);
		})
		.catch((err) => {
			console.error('失败', err);
		});
});
</script>

<style lang="less">
.my-swipe .van-swipe-item {
	color: #fff;
	font-size: 40rpx;
	line-height: 400rpx;
	text-align: center;
	background-color: #39a9ed;
}

.home {
	height: 100%;
	width: 100%;
	.home_header {
		height: 500rpx;
		.home_search {
			width: 100%;
			position: fixed;
			z-index: 1;
			background-color: whitesmoke;
		}
		.home_rotating {
			height: 100%;
			width: 100%;
			padding-top: 100rpx;
		}
	}
	.home_content {
		height: 300rpx;
		width: 100%;

		margin-top: 20rpx;
		box-sizing: border-box;
		.home_options {
			height: 200rpx;
			border: 2rpx solid #ccc;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			margin-bottom: 10rpx;
			.option_ul {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 40rpx;
				.option_li {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					image {
						width: 30px;
						height: 30px;
					}
				}
			}
		}
		.home_bulletin {
			margin-top: 20rpx;
			.notice-swipe {
				height: 100rpx;
				line-height: 100rpx;
			}
		}
	}
	.home_bottom {
		width: 100%;
		// height: 2000rpx;
		.toggle {
			z-index: 1;
			.home_card {
				box-sizing: border-box;
				padding-bottom: 15rpx;
			}
		}
	}
}
</style>
